<template>
  <div class="video-list">
    <div class="video-content">
      <video v-if="videoList.length"
             :src="videoList[0].sp" class="mainVideo" controls="controls"
      ></video>
      <div class="title-wrap">
        <div v-if="videoList.length" class="title">
          {{ videoList[0].name }}
        </div>
        <div class="btn" @click="$emit('close')">
          关闭画面
        </div>
      </div>
    </div>
    <div class="list-wrap">

      <category-title title="校园宣传图" title-sub="Campus promotional video"/>
      <div class="list">
        <!--        <div class="item">-->
        <!--          <video v-if="videoList.length"-->
        <!--                 src="@/assets/aa.mp4" class="mainVideo" controls="controls"-->
        <!--          ></video>-->
        <!--        </div>-->
        <!--        <div class="item">-->
        <!--          <video v-if="videoList.length" :poster="videoList[0].img"-->
        <!--                 :src="videoList[0].sp" class="mainVideo" controls="controls"-->
        <!--          ></video>-->
        <!--        </div>-->
        <template v-for="(item, index) in videoList">
          <div v-if="index>0" :key="index" class="item" @click="PreviewImg(item.img)">
            <div class="title">
              {{ item.name }}
            </div>
            <div class="preview">
              <!--              <video v-if="videoList.length"-->
              <!--                     :src="item.sp"-->
              <!--                     class="mainVideo" controls="controls"-->
              <!--              </video>-->
              <img :src="item.img" alt="" style="object-fit: cover;width: 100%;height: 100%;">
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
  <preview v-if="showPreview" :url="previewUrl" @close="showPreview = false"/>
</template>

<script setup>
import CategoryTitle from "@/components/customs/category-title/index.vue";
import Preview from "@/components/customs/preview/index.vue";
import {VideoList} from "@/common/customs/setting";
import {ref} from "@vue/reactivity";


const showPreview = ref(false);
const previewUrl = ref("");
const videoList = ref([]);
// eslint-disable-next-line no-undef
const emit = defineEmits(["close", "imgCLick"]);
const getVideo = async () => {
  const api = new VideoList();
  await api.send();
  const {data} = await api.getDatas();
  videoList.value = data.data;
};
getVideo();
const PreviewImg = (url) => {
  emit('imgCLick',url)
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
